@import "../varibles";
@import "../mixins/mixin";
.vue-slider{
	position: relative;
    margin: 10px 8px;
    height: $slider-height;
    border-radius: $slider-border-radius;
    background-color: $slider-background;
    cursor: pointer;
    border-top: $slider-border;
    border-bottom: $slider-border;
    @include transition(background-color .3s ease);

    &:hover{
    	 background-color: $slider-background-hover;
    	.vue-slider-handler{
			border-color:$slider-handler-border-hover;
    	}
    	.vue-slider-track{
    		 background-color: $slider-track-background-hover;
    	}
    }
}

.vue-slider-handler{

	position: absolute;
    margin-left: -7px;
    margin-top: -4px;
    width: $slider-handler-width;
    height: $slider-handler-height;
    cursor: pointer;
    border-radius: 50%;
    border: $slider-handler-border;
    background-color: $slider-handler-background;
    z-index: 2;
    @include transition(border-color .3s ease);
}

.vue-slider-track{
	position: absolute;
    left: 0;
    height: $slider-track-height;
    border-radius: $slider-track-border-radius;
    background-color: $slider-track-background;
    z-index: 1;
    @include transition(background-color .3s ease);
}